2018

您所在的位置：网站首页 › css x轴滚动条 › 2018

2018

2022-12-20 16:06| 来源: 网络整理| 查看: 265

引入css

rel:告诉浏览器引入的是一个样式表文件 type:文件的类型 href:路径

路径： 1.绝对路径：

本地存放文件的地址 D:\miaov\4-12\index.css 网络地址 https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491994791514&di=798f627c77983625c2a311a600f51edc&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201507%2F6568e0bd07c6474a9fa400942ad1fa19.jpg 2.相对路径：相对于当前文件的路径例： index.css 当前文件下的index.css文件 css/index.css 当前文件下的css文件夹里面的index.css文件边框 border 颜色color ：transparent 透明样式 style：solid 实线、dashed虚线、dotted点线大小width： border-width：40px ；相当于设置上右下左4条边框都是40px border-width ：10px 40px ；相当于设置上下边框是10px 左右边框是40px -border-width: 10px 40px 100px；上边框 10px 左右边框都是40px 下边框是100px 注意针对同一个元素的相同样式设置，后者覆盖前者背景 background position定位：position(x,y) X轴 1.（关键字） left 图片的左侧和元素的左侧对齐 2.（关键字） center 图片的中间和元素的中间对齐 3.（关键字） right 图片的右侧和元素的右侧对齐 1.（具体的数值）正值图片往右移动对应的距离 2.（具体的数值）负值图片往左移动对应的距离

Y轴 1.（关键字）top 图片的顶部和元素的顶部对齐 2.（关键字）center 图片的中间和元素的中间对齐 3.（关键字）bottom 图片的底部和元素的底部对齐 1.（具体的数值）正值把图片从上往下移动对应的距离 2.（具体的数值）负值把图片从下往上移动对应的距离百分比图片的百分比位置和元素的百分比位置对齐

attachment 背景图片固定 1.scroll 滚动 2.fixed 固定（位置不随着页面的滚动而变化）注意：使用fixed之后背景图片位置的position计算方式就不是根据元素的左上角进行计算了，而是根据可视区的位置字体font

样式：

font-style:italic 斜体 font-weight:bold 加粗 line-height:行高值是具体的数字 *带单位行高就是具体的像素值 *不带单位行高是字体大小的倍数 *文字上下的所空出的距离 = （行高-字体大小）/2，如果这个值变成了一个小数，那么上面小下面大样式集合固定顺序：font:weight style size/line-height family font:bold italic 20px/40px '微软雅黑' font-size,font-family是必写项文本

text-align 文字对齐 text-decoration 文本修饰 *underline 下划线 *line-through 删除线 *overline 上划线

间距（可以是负值）

letter-spacing 字母间距/字间距 word-spacing 单词间距/词间距 white-space:

white-space: pre; //保留文本输入格式 white-space:pre-wrap; //保留空白符序列，但是正常地进行换行 white-space:pre-line; //合并空白符序列，但是保留换行符 white-space: nowrap; //制不换行，文本在元素中一行显示，不换行

词内断行 word-break: break-all;

padding

1.padding区域可以显示元素背景

margin 外边距

1.margin叠压：两个相邻元素的margin是叠压在一起的，距离以大的为准

2.margin传递：元素的上下margin会传递给父级，（父元素的第一个子元素的上margin、父元素的最后一个子元素的下margin，会传递给父级（作用在父级身上））

margin-left: auto; (元素在父级中居右显示) margin-right: auto;(元素在父级中居左显示) margin: 0 auto; (元素在父级中水平居中显示) a标签不会继承父级的字体颜色，必须在自己身上设置换行会产生空格（解决：1.不换行 2.设置父级的字体大小为0） href值为#id名称跳转至id元素所在位置 target 在何处打开链接点击跳转打开新窗口点击跳转当前窗口打开 base 定义页面上所有的链接的默认打开方式和默认地址

a标签下划线的颜色和字体颜色一致

常用布局标签

dl 定义列表 dt 定义列表的列表项 dd 对dt展开说明

header 页面头部或者板块头部 footer 页面底部或者板块底部 section 区域板块 nav 导航 article 一篇文章，或者帖子 aside 附属信息，一般用在article的属性信息,或者作为整个页面附属，如侧边栏 cite 引用 mark 标记（清除：background-color:none;） time 时间图片 img

图片默认样式清除：vertical-align: top; -top 以顶部对齐 -middle 以中部对齐 -bottom 以底部对齐清除底边距离：border: none; （低版本ie 下边框）

表格 table caption表格标题（可以没有） thead 表头 tbody 表格主体 tfoot 表格底部（可以没有） tr 行/th 单元格 (加粗、居中)/td 单元格表格默认样式 td和th有padding（padding 0），一般在td和th上设置背景颜色直接设置在表格上的内容： cellspacing 单元格间距 (直接加在html里面）cellspacing='10px'; cellpadding 单元格填充cellpadding='10px'; rowspan 合并行rowspan="2";//合并两行 colspan 合并列colspan="2";//合并两列加在样式表中间的内容 border-spacing 单元格间距 border-collapse 边框合并 border-collapse:collapse;//合并 border-collapse:separate;//分离（默认）

在td、th元素上设置的内容

单元格设置宽度，一列宽度都会进行变化单元格设置高度，一行高度都会进行变化单元格的内容垂直对齐方式通过修改单元格的vertical-align(top/middle/bottom) 表单form action 数据的提交地址,数据提交成功之后的跳转地址 name 数据名称 (添加name来提交数据) type 类型 text 文本输入框 password 密码输入框 radio单选框 checkbox 多选框(复选框) submit 提交按钮 reset 重置按钮 file 选择文件 hidden 隐藏控件 select 下拉菜单 option 下拉菜单的选项 textarea 文本域 rows 行 cols 列 label标签的使用 for属性要辅助的按钮的id名

表单的属性 readonly 只读属性可以被提交 disabled 禁用或者说不可用的不会被提交 checked 单选框或者复选框的默认选中 selected 设置下拉菜单的默认选中项

【本文地址】

2018

2018

今日新闻

推荐新闻